<template>
    <div class="user-center">
        <el-row :gutter="20">
            <el-col :span="8" :offset="0">
                <el-card shadow="never">
                    <div class="info">
                        <el-avatar
                            icon="el-icon-user-solid"
                            :src="avatar"
                            fit="fill"
                            shape="square"
                            :size="100"
                        ></el-avatar>
                        <el-descriptions
                            title="用户信息"
                            direction="horizontal"
                            :column="1"
                            border
                        >
                            <el-descriptions-item label="用户名">
                                {{ nickName }}
                            </el-descriptions-item>
                            <el-descriptions-item label="角色信息">
                                <template v-if="roles.length !== 0">
                                    <el-tag
                                        type="primary"
                                        v-for="(r, index) in roles"
                                        :key="index"
                                    >
                                        {{ r }}
                                    </el-tag>
                                </template>
                                <el-tag v-else type="info">无</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16" :offset="0">
                <el-card shadow="never">
                    <el-tabs
                        v-model="activeName"
                        class="demo-tabs"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane label="修改密码" name="updatePwd">
                            <el-form
                                :model="userPwd"
                                ref="form"
                                label-width="80px"
                                :inline="false"
                                size="normal"
                            >
                                <el-col :span="12">
                                    <el-form-item label="原密码">
                                        <el-input
                                            v-model="userPwd.pwd"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="新密码">
                                        <el-input
                                            v-model="userPwd.pwd"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="再次密码">
                                        <el-input
                                            v-model="userPwd.rePwd"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary">
                                            修改
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia'
let { nickName, avatar, roles } = storeToRefs(useUserStore())

type UserPwd = {
    pwd: string
    rePwd: string
}

let userPwd = reactive<UserPwd>({
    pwd: '',
    rePwd: '',
})
let activeName = ref('updatePwd')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<style lang="less" scoped>
.user-center {
    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
}
</style>
